<template>
    <div :class="[cursorType ? 'penCursor' : 'defaultCursor']" ref="canvasBoxRef" id="canvasBox"></div>

    <ToolBar @clickCallbackHandler="clickCallbackHandler" />

    <input ref="fileRef" @change="fileChange" type="file" class="file" name="file" />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import ToolBar from './components/toolBar/toolBar.vue';
import { BlackBoard } from "./components/blackBoard/blackBoard";
import type { lineStyleType, TypeCallHandle } from "./typing";

const cursorType = ref(true);
const canvasBoxRef = ref<HTMLDivElement | null>(null);
const fileRef = ref<null | HTMLInputElement>(null);
let blackBoard: BlackBoard;

onMounted(() => {
    blackBoard = new BlackBoard(canvasBoxRef.value!);
    console.log(blackBoard)
})

const clickCallbackHandler = (type: TypeCallHandle, value: lineStyleType) => {
    blackBoard.bindEvent();
    cursorType.value = true;
    const typeObject: Record<TypeCallHandle, Function> = {
        width: () => blackBoard.paintBrush.setLineStyle(value),
        color: () => blackBoard.paintBrush.setLineStyle(value),
        lineType: () => blackBoard.paintBrush.setLineStyle({}, value as any),
        eraserWidth: () => blackBoard.paintBrush.setLineStyle({
            strokeStyle: '#ffffffff',
            lineWidth: value.lineWidth
        }, 'eraser'),
        bgColor: () => blackBoard.setCanvasBg('bgColor', value as string),
        bgImage: () => blackBoard.setCanvasBg('bgImage', value as string),
        clear: () => blackBoard.clear(),
        mouseOrPen: () => {
            const isDrawLine = value as unknown as boolean;
            blackBoard.paintBrush.isDrawLine = isDrawLine;
            cursorType.value = isDrawLine;
        },
        preservationClipBoard: () => blackBoard.preservationPicture('clipBoard'),
        preservationLocal: () => blackBoard.preservationPicture('local'),
        uploadFile: () => {
            fileRef.value?.click()
        },
        left: () => blackBoard.previousStep(),
        right: () => blackBoard.nextStep(),
    }

    typeObject[type]();
}

const fileChange = (event: Event) => {
    const image = new Image();
    image.src = window.URL.createObjectURL((event.target as any).files[0])
    blackBoard.historyOperate.push({
        type: 'image',
        options: {
            image: {
                image: image,
                width: 150,
                height: 0,
                x: 100,
                y: 100,
                z: blackBoard.historyOperate.length,
                active: false
            }
        },
        value: []
    })
    image.onload = () => {
        const img = blackBoard.historyOperate[blackBoard.historyOperate.length - 1].options.image;
        img!.height = image.height * 150 / image.width;
        const { width, height, x, y } = img!;
        blackBoard.blackBoardBg.ctx.drawImage(image, x, y, width, height)
    }
    // historyOperateIndex.value++;
}
</script>

<style lang="scss">
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
}

#app {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

}

#canvasBox,
canvas {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.defaultCursor {
    cursor: auto;
}

.penCursor {
    cursor: url("/public/pen.ico") 6 28, auto;
}

.file {
    display: none;
}
</style>